<template>
  <div id='leftmenu'>
    <div
      class='leftmenu-info'>
      <img
        src="/image/logo.45bbb710.png"
        alt="">
      <transition name='my'>
        <h1 v-if="!isCollapse"
          class='info-title'>
          商品后台系统</h1>
      </transition>
    </div>
    <div class='info-menu'>
      <el-menu
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        background-color="#4667d8"
        text-color="#fff"
        active-text-color="rgb(115, 249, 210)"
        :unique-opened="unique"
        :router=true>
        <template
          v-for='(item,index) in list'>
          <el-submenu
            :index="`${index}`"
            v-if='item.child'
            :key="index"
            :class='ckindex==index?"add-class":""'>
            <template
              slot="title">
              <i
                :class="`${item.icon}`"></i>
              <span>{{item.name}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for='(it,i) in item.child'
                :key=i
                :index='`${index}-${i}`'
                @click='addclass(index)'
                :route="it.router">
                {{it.name}}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item v-else
            :index="`${index}`"
            :key="index"
            :class='ckindex==index?"add-class":""'
            @click='addclass(index)'
            :route='item.router'>
            <i
              :class=item.icon></i>
            <span
              slot="title">{{item.name}}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { MenuItem, Menu } from 'element-ui'
export default {
  name: 'leftmenu',
  components: {
    [MenuItem.name]: MenuItem,
    [Menu.name]: Menu,
  },
  data() {
    return {
      list: [
        { name: '首页', icon: 'el-icon-price-tag', router: 'home' },
        {
          name: '商品',
          icon: 'el-icon-goods',
          child: [
            { name: '品类管理', router: 'shoptype' },
            { name: '商品管理', router: 'shop' },
          ],
        },
        {
          name: '用户管理',
          icon: 'el-icon-user',
          router: 'admin',
        },
        {
          name: '角色管理',
          icon: 'el-icon-service',
          router: 'rol',
        },
        {
          name: '图形图表',
          icon: 'el-icon-help',
          child: [
            { name: '柱形图', router: 'zhu' },
            { name: '折线图', router: 'zhe' },
            { name: '饼图', router: 'bing' },
          ],
        },
      ],
      unique: true,
      isCollapse: false,
      ckindex: 0,
    }
  },

  mounted() {
    this.$emitter.on('sendinfo', (args) => {
      this.isCollapse = args
    })
    if (sessionStorage.getItem('index') || sessionStorage.getItem('index') == 0) {
      this.ckindex = sessionStorage.getItem('index')
    }
  },
  methods: {
    addclass(i) {
      sessionStorage.setItem('index', i)
      this.ckindex = sessionStorage.getItem('index')
    },
  },
}
</script>

<style lang='less'>
.my-enter,
.my-leave-to {
  opacity: 0;
  width: 120px;
}
.my-enter-active {
  opacity: 1;
  transition: all 0.5s ease;
}

.my-leave-active {
  width: 0;
  transition: all 0.5s ease;
}
.add-class {
  position: relative;
  background-color: rgb(59, 85, 180) !important;
  span {
    color: rgb(115, 249, 210) !important;
  }
  i:before {
    color: rgb(115, 249, 210) !important;
  }
  div {
    background: rgb(59, 85, 180) !important;
    i:before,
    span {
      color: rgb(115, 249, 210) !important;
    }
  }
}
.el-submenu {
  .el-menu-item {
    background-color: rgb(45, 69, 156) !important;
  }
}
.add-class:after {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  content: '';
  width: 3px;
  height: 56px;
  background-color: rgb(115, 249, 210);
}
#leftmenu {
  height: 100%;
  text-align: center;
  line-height: 60px;
  text-align: left;
  background-color: #f0f0f0;
  overflow: hidden;
  img {
    width: 40px;
    vertical-align: middle;
  }
  .info-title {
    display: inline-block;
    height: 60px;
    font-size: 20px;
    color: #fff;
    vertical-align: middle;
    margin-left: 10px;
  }
  .leftmenu-info {
    text-align: center;
    height: 60px;
    background: url(/image/navbar_bg.2b61542e.png);
  }
  .info-menu {
    display: inline-block;
    height: 100%;
    background-color: rgb(70, 103, 216);
    .el-menu-vertical-demo {
      text-align: left;
    }
    .el-menu {
      border: none;
    }
    .el-menu--collapse {
      li {
        width: 64px;
      }
    }
    li {
      width: 210px;
    }
    ul li:hover,
    ul div:hover {
      background-color: rgb(59, 85, 180) !important;
    }
    .el-submenu__icon-arrow:before,
    i {
      color: #fff !important;
    }
  }
}
.el-menu-item-group__title {
  padding: 0;
}
</style>